<template>
	<a-layout>
<!--	上	-->
		<a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
			<header id="snowyHeaderLogo" class="snowy-header-logo">
				<div class="snowy-header-left">
					<div class="logo-bar">
						<img class="logo" :src="sysBaseConfig.SNOWY_SYS_LOGO" />
						<span>{{ sysBaseConfig.SNOWY_SYS_NAME }}</span>
					</div>

				</div>
<!--				<div class="snowy-header-right">
					<a-avatar style="background-color: #1890ff;margin-right: 5px">
						<template #icon><UserOutlined /></template>
					</a-avatar>

					<a href="/login">登录</a>
				</div>-->
			</header>

		</a-layout-header>
<!--	中	-->
		<a-layout-content :style="{ margin: '24px 16px 0', overflow: 'auto' ,marginTop:'64px',background:'url(/img/bg.jpg) center'}">
			<a-divider orientation="left">热门应用</a-divider>
			<div class="mt-2" style=" padding: 5px 30px">
				<a-row :gutter="16">

					<a-col v-for="(item, index) in data" :key="index" :xs="16" :sm="8" :md="6" :lg="6" :xl="6" class="mb-4">
						<a-card @click="tolink(item.href)" class="cursor-pointer hover:shadow-[0_4px_20px_-5px_rgba(0,0,0,0.35)] transition duration-300">
							<template #default>
								<div class="flex h-27">
									<div class="w-10 h-10 bg-gray-300 rounded-full">
										<img class="w-10 h-10 rounded-full" :src="item.link">
									</div>
									<div class="ml">
										<div style="font-size: 18px; font-weight: 500;">
											{{ item.title }}
										</div>
										<div class="h-17 overflow-hidden overflow" style="color:#000000">
											{{ item.content }}
										</div>
										<div class="projectItemContent">
<!--											<template #avatar>
												<a-avatar :src="/img/a.png" />
											</template>-->
											<span style="margin-right: 5px">
												<a-badge dot>
												  <a-avatar size="small" style="background-color: #1890ff">
													<template #icon><UserOutlined/></template>
												  </a-avatar>
												</a-badge>
											</span>
											<a>{{ item.member }}</a>
										</div>
									</div>
								</div>
							</template>
						</a-card>
					</a-col>
				</a-row>
			</div>

			<a-back-top />
		</a-layout-content>
<!--	下	-->
		<a-layout-footer :style="{ textAlign: 'center' }">
			{{ sysBaseConfig.SNOWY_SYS_COPYRIGHT }}
		</a-layout-footer>
	</a-layout>

</template>
<script setup>
import config from '@/config'

const sysBaseConfig = computed(() => {
	return config.SYS_BASE_CONFIG
})
const tolink=(item)=>{
	//const hasRemoteUrl = /^http(s)?:\/\//.test(item.path);
	window.location.href=item;
}
const data = ref([
	{
		title: 'FCRE',
		link: '/img/logo.png',
		href: '/login',
		content: '练习过程全记录；无纸化考试；全自动阅卷。',
		member: '教师+学生'
	},
	{
		title: 'iTest',
		link: '/img/itestcx.png',
		href: 'https://huhstxnitest.unipus.cn/',
		content: '为高校外语教学提供在线测评资源与服务的考试校内端',
		member: '教师+学生'
	},
	{
		title: '学习通',
		link: '/img/cx.png',
		href: 'https://hnrwkjxy.fanya.chaoxing.com/portal',
		content: '集教学、学习、管理于一体的综合性教育平台',
		member: '教师+学生'
	},
	{
		title: '人文超星考试',
		link: '/img/cxks.png',
		href: 'http://passport2.chaoxing.com/login?refer=http%3A%2F%2Fmooc1-2.chaoxing.com%2Fexam%2Ftest%2Fexamcode%3FpageId%3D43230%26wfwfid%3D130047%26websiteId%3D35228&fid=1897&loginType=4&newversion=true&_blank=0',
		content: '人文本部-超星考试系统',
		member: '学生'
	},
	{
		title: '继教超星考试',
		link: '/img/cxks.png',
		href: 'https://v196290.kaoshi.chaoxing.com/login',
		content: '人文继续教育-超星考试系统',
		member: '学生'
	},
	{
		title: '超星考务',
		link: '/img/cxks.png',
		href: 'https://passport2.chaoxing.com/login?fid=12&refer=https%3A%2F%2Fhnrwkjxy.kaoshi.chaoxing.com%2Fexam%2Fjsmanage',
		content: '人文本部-超星考试：排考、监考、阅卷',
		member: '教师'
	},
	{
		title: '优学院',
		link: '/img/ulearning.png',
		href: 'https://www.ulearning.cn/ulearning/index.html#/index/portal',
		content: '在线教育平台，提供多样化的课程和资源，支持在线学习和交流。',
		member: '教师+学生'
	},

])


</script>
<style  scoped lang="less">
.textOverflow() {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	word-break: break-all;
}
.projectItemContent {
	display: flex;
	height: 28px;
	margin-top: 8px;
	overflow: hidden;
	font-size: 12px;
	line-height: 28px;
	.textOverflow();
	a {
		display: inline-block;
		flex: 1 1 0;
		color: rgba(0, 0, 0, 0.45);
		.textOverflow();
		&:hover {
			color: #1677ff;
		}
	}

}
.ant-layout-footer{    padding: 4px 50px;}
.logo-bar span  {
	color:#fff;
}

[data-theme='dark'] .site-layout .site-layout-background {
	background: #141414;
	color:#fff;
}
.ant-card-grid{width: 25%; text-align: center}
.overflow {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
</style>
